<template>
  <span>
    <button @click="onSubmit">点击{{ data.a }}</button>
    <div width="90px" style="right:200px;top:110px;" class="f-pa smallSaturn2">1</div>

    <div class="div1"></div>
  </span>
</template>
<style>
    .div1 {
      width: 40px;
      height: 40px;
      background: linear-gradient(#fc0, #f0c);
      offset-path: path('M 10 80 C 80 10, 130 10, 190 80 S 300 150, 360 80');
      animation: move 2s infinite linear;
    }
  
    @keyframes move {
      0% {
        offset-distance: 0%;
      }
  
      100% {
        offset-distance: 100%;
      }
    }
</style>
<style lang="less">
@keyframes enterAnimation {
  0% {
    transform: translateX(0px);
    transform: translateY(0px);
    // opacity: 0;
  }


  50% {
    transform: translateY(100px);
    // transform: translateX(-50px);
    opacity: 1;
  }

  100% {
    transform: translateY(100px) translateX(-100px);
    opacity: 1;
  }
}


.smallSaturn2 {
    offset-path: path('M 10 80 C 80 10, 130 10, 190 80 S 300 150, 360 80');
  animation: enterAnimation 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  /*播放次数*/
  /*保持动画结束的状态*/
  animation-delay: 1.8s;
  /*  动画延时*/
  // opacity: 0;
}
</style>
<script setup>
import { ref, reactive, toRefs, watchEffect, computed, watch, onUpdated, onBeforeUpdate, onBeforeMount, onMounted } from "vue";
// const props = defineProps({
//     data: {
//         type: Object,
//         default: function () {
//             return {}
//         }
//     }
// });
// const emit = defineEmits(["change"]);
// emit('change');


const data = reactive({
  formData: {

  }
});
onMounted(() => {

});
const onSubmit = () => {
  data.a = 222;
};


//watch(() => props.value, (newValue, oldValue) => {
//
//}, { deep: true, immediate: true });

watchEffect(() => {
  const a = data.a;
});
</script>
<style lang="less" scoped></style>